<template lang="pug">
.table-add
  el-dialog(title="添加" v-model="dialogVisible" @close="closeFun" custom-class="dialog-width")
    el-scrollbar.scrollbar-dialog-wrap
      div {{state.defaultData.id}}
      el-form
        el-form-item
          el-button(type="danger" @click="handleClose") 取消{{dialogVisible}}
</template>

<script setup>
import { ref, reactive, getCurrentInstance, defineProps, defineEmit, watch } from 'vue'
// import * as vue from 'vue'

// const { proxy } = getCurrentInstance() // 内部组件实例
const emit = defineEmit(['closeFun', 'update:isDialog'])

const props = defineProps({
  isDialog: {
    required: true
  },
  dialogRecord: {
    required: false
  }
})

const state = reactive({
  defaultData: {}
})
const dialogVisible = ref(false)

// 侦听
watch(() => [props.isDialog], ([newDialog, oldDialog]) => {
  if (!newDialog) return

  dialogVisible.value = newDialog
  state.defaultData = props.dialogRecord
}, { immediate: true })

// 关闭弹窗
function handleClose () {
  emit('closeFun')
  dialogVisible.value = false
}
function closeFun () {
  emit('update:isDialog', false)
}
</script>

<style lang="scss">
</style>
